<template>
    <div class="learnIndex">
        <div class="top">
            <i @click="answerStatus" class="iconfont iconkaoshi_timu_icon"></i>
        </div>

        <div class="progress">
            <div class="progress1">
                <div :style="{width:(~~no+1)/data.test_info.question_num*100 +'%'}"></div>
            </div>

            <div class="topic">第{{~~no+1}}/{{data.test_info.question_num}}题</div>
        </div>
        <div class="content">
            <p class="title">{{~~no+1}}.{{subject.question_type | question_type}}</p>
            <p class="topic1" v-html="subject.title"></p>

            <p
                    v-for="(item,index) of subject.option"
                    class="select"
                    :class="item.answer?'red':''"
                    :key="item.id"
                    @click="answer(item)"
            >{{index+1 | az}}.{{item.title}}</p>

            <div class="btn" v-if="!selected">{{submit}}</div>
            <div class="btn2" v-if="selected" @click="next">{{submit}}</div>
            <div class="time">
                <i class="iconfont iconkaoshi_dati_time"></i>
                <span>{{ time | time}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                listData: [],
                data: JSON.parse(localStorage.getItem("subject")),
                subject: {},
                no: 0,
                fraction: true,
                selected: false,
                answerC: [],
                id: [],
                submit: "确定",
                time: "",
                idItem: [],
                isOver:false
            };
        },

        mounted() {
            this.$progress.done();
            this.init();
            this.no = this.$route.query.index || 0;
            this.isOver =this.$route.query.isOver;
            console.log(this.isOver)
            this.data.subject[this.no].option.forEach(e => {
                if (e.answer == true) {
                    this.selected = true;
                    return;
                }
            });
        },
        beforeRouteLeave(to, from, next) {
            if (to.path != "/learn/answerStatus") {
                localStorage.removeItem("answerC");
                localStorage.removeItem("idItem");
            }
            next();
        },
        filters: {
            time: function(e) {
                var h = Math.floor(e / 3600);
                var m = Math.floor(e / 60) % 60;
                var s = Math.floor(e % 60);
                return (
                    h.toString().padStart(2, "0") +
                    ":" +
                    m.toString().padStart(2, "0") +
                    ":" +
                    s.toString().padStart(2, "0")
                );
            },
            question_type: function(e) {
                if (e == 1) {
                    return "单选题";
                }
                if (e == 2) {
                    return "多选题";
                }
                if (e == 3) {
                    return "判断题";
                }
                if (e == 4) {
                    return "不定项选择题";
                }
            },
            az: function(num) {
                var s = "";
                while (num > 0) {
                    var m = num % 26;
                    if (m === 0) m = 26;
                    s = (m + 9).toString(36) + s;
                    num = (num - m) / 26;
                }
                return s.toUpperCase();
            }
        },

        methods: {
            init() {
                this.$http
                    .post("/applets/Test/start_question", {
                        phone: JSON.parse(Cookies.get('user_71ydj')).phone,
                        exam_scene_id: this.$route.query.id
                    })
                    .then(res => {
                        this.data = JSON.parse(JSON.stringify(this.data));
                        this.subject = this.data.subject[this.no];
                        this.countdown();
                    });
            },
            countdown() {
                this.time = this.data.test_info.duration;
                var set = setInterval(() => {
                    this.time--;
                    if (this.time === 0) {
                        clearInterval(set);
                        this.nextSubmit();
                    }
                }, 1000);
            },
            nextSubmit() {
                this.$http
                    .post("/applets/Test/answer_complete", {
                        id: this.$route.query.id,
                        phone: JSON.parse(Cookies.get('user_71ydj')).phone,
                        answer: localStorage.getItem("answerC")
                    })
                    .then(res => {
                        localStorage.setItem("grade", JSON.stringify(res.data));
                        this.$router.push({
                            path: "/learn/testScore",
                            query: { id: this.$route.query.id }
                        });

                        return;
                    });
            },

            next() {
                //每答完一题 记录一次
                this.idItem = JSON.parse(localStorage.getItem("idItem"));
                this.id = this.idItem[this.no];
                this.answerC =
                    JSON.parse(localStorage.getItem("answerC")) ||
                    new Array(this.data.test_info.question_num);

                localStorage.setItem("subject", JSON.stringify(this.data));

                this.answerC[this.no] = {
                    subject_id: this.subject.subject_id,
                    question_type: this.subject.question_type,
                    answer: [...this.id]
                };
                this.answerC = localStorage.setItem(
                    "answerC",
                    JSON.stringify(this.answerC)
                );

                if (this.no == this.data.test_info.question_num - 2) {
                    this.submit = "提交试卷";
                }
                if (this.no == this.data.test_info.question_num - 1) {
                    this.nextSubmit();
                    return;
                }
                this.id = [];
                this.selected = false;
                this.no = ~~this.no + 1;
                localStorage.setItem("no", JSON.stringify(this.no));
                this.subject = this.data.subject[this.no];
                this.data.subject[this.no].option.forEach(e => {
                    if (e.answer == true) {
                        this.selected = true;
                        return;
                    }
                });
            },
            answer(item) {
                console.log(item)
                this.idItem =
                    JSON.parse(localStorage.getItem("idItem")) ||
                    new Array(this.data.test_info.question_num);
                this.id = this.idItem[this.no] || [];
                //单选题
                console.log(this.subject)
                if (this.subject.question_type == 1) {
                    if (!this.selected) {
                        item.answer = true;
                        this.id.push(item.id);
                        this.selected = true;
                        this.idItem[this.no] = this.id;
                        localStorage.setItem("idItem", JSON.stringify(this.idItem));
                        return;
                    }
                    return;
                }
                //多选题
                if (this.subject.question_type == 2) {
                    if (!item.answer) {
                        item.answer = true;
                        this.id.push(item.id);
                        this.selected = true;
                        this.idItem[this.no] = this.id;
                        localStorage.setItem("idItem", JSON.stringify(this.idItem));
                        return;
                    }
                    return;
                }

                //判断题
                if (this.subject.question_type == 3) {
                    if (!this.selected) {
                        item.answer = true;
                        this.id.push(item.id);
                        this.selected = true;
                        this.idItem[this.no] = this.id;
                        localStorage.setItem("idItem", JSON.stringify(this.idItem));
                        return;
                    }
                    return;
                }

                //不定项选择题
                if (this.subject.question_type == 4) {
                    if (!item.answer) {
                        item.answer = true;
                        this.id.push(item.id);
                        this.selected = true;
                        this.idItem[this.no] = this.id;
                        localStorage.setItem("idItem", JSON.stringify(this.idItem));
                        return;
                    }
                    return;
                }
            },

            answerStatus() {
                this.$router.push({
                    path: "/learn/answerStatus",
                    query: {
                        id: this.$route.query.id
                    }
                });
            }
        }
    };
</script>

<style scoped lang="scss">
    * {
        margin: 0;
        padding: 0;
    }

    .greed {
        color: #74c282 !important;
    }

    .red {
        color: red !important;
    }
    .learnIndex {
        position: relative;
        background: url("~@as/img/kaoshi_beijing@2x.png");
        background-size: 100% auto;
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 0;

        .top {
            width: 100%;
            display: flex;
            justify-content: flex-end;
        }
        i {
            color: #fff;
            font-size: 20px;
            margin-top: 20px;
            margin-right: 20px;
        }

        .progress {
            margin-top: 15px;
            width: 90%;
            display: flex;
            justify-content: center;
            align-items: center;

            .progress1 {
                width: 249px;
                height: 5px;
                background: rgba(0, 0, 0, 0.08);
                margin-right: 15px;
                border-radius: 10px;
                div {
                    height: 100%;
                    background: #fff;
                    width: 20px;
                    border-radius: 10px;
                }
            }
            .topic {
                font-size: 12px;
                color: #fff;
            }
        }
        .btn {
            margin-top: 34px;
            width: 287px;
            height: 36px;
            background: #dddddd;
            color: #fff;
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;

            position: absolute;
            bottom: 35px;
            left: 50%;
            margin-left: -143.5px;
        }
        .btn2 {
            margin-top: 34px;
            width: 287px;
            height: 36px;
            background: #f47548;
            color: #fff;
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;

            position: absolute;
            bottom: 35px;
            left: 50%;
            margin-left: -143.5px;
        }
        .content {
            position: relative;
            width: 335px;
            height: 510px;
            background: #fff;
            margin-top: 40px;
            border-radius: 4px;
            padding: 25px 18px 25px 18px;
        }
        .title {
            font-size: 15px;
            color: #999;
        }

        .topic1 {
            font-size: 15px;
            margin-top: 25px;
            color: #333333;
            font-weight: bold;
        }
        .select {
            margin-top: 29px;
            font-size: 15px;
            color: #666;
        }
        .select + .select {
            margin-top: 20px;
        }

        .time {
            width: 86px;
            height: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #ffb094;
            position: absolute;
            right: 0;
            top: 25px;
            border-radius: 20px 0 0 20px;
            i {
                margin: 0;
                margin-right: 8px;
                margin-left: 10px;
                color: #fff;
                font-size: 15px;
            }

            span {
                color: #fff;
                font-size: 12px;
            }
        }
    }
</style>